<script setup lang="ts">
import { watch, reactive, defineProps } from "vue";
// export default defineComponent({
//   props: ["state", "actions", "form"],
//   watch: {
//     formData: {
//       handler(val) {
//         console.log("this.props.form:33333333333333333333 ", val);
//         // this.form = { ...val };
//       },
//       immediate: true,
//     },
//   },
//   data() {
//     return {
//       form: {
//         // name: "323",
//         // region: "",
//       },
//       rules: {
//         name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
//         region: [
//           { required: true, message: "请选择活动区域", trigger: "change" },
//         ],
//       },
//     };
//   },
//   mounted() {
//     // console.log("this.props.form: ", this.props);
//     // this.form = { ...this.props.form };
//   },
//   methods: {
//     submitForm(formName) {
//       this.$refs[formName]?.validate?.((valid) => {
//         if (valid) {
//           alert("submit!");
//         } else {
//           console.log("error submit!!");
//           return false;
//         }
//       });
//     },
//   },
// });
const props = defineProps({
  formData: Object,
});
let form = reactive({});
const rules = {
  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  region: [{ required: true, message: "请选择活动区域", trigger: "change" }],
};
watch(
  () => props.formData,
  (newVal, oldVal) => {
    console.log("值变化了", newVal, oldVal);
    form = { ...newVal };
  },
  { immediate: true }
);
</script>
<template>
  <div class="drawer-container">
    <el-form
      ref="ruleForm"
      :model="form"
      label-width="100px"
      :rules="rules"
      label-position="right"
    >
      <el-form-item label="Activity" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Activity3" prop="region">
        <el-select v-model="form.region" placeholder="Activity zone">
          <el-option label="Zone one" value="shanghai"></el-option>
          <el-option label="Zone two" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="less">
.drawer-container {
  width: 300px;
  height: calc(100vh - 60px);
  background-color: #fff;
  border-right: 1px solid #ccc;
  padding-top: 20px;
}
</style>
